<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <!-- Boilerplate -->
        <link rel="stylesheet" href="css/normalize.css">
        
        <!-- jQuery UI -->
        <!--link rel="stylesheet" href="css/start/jquery-ui-1.9.1.custom.min.css"-->

        <!-- Bootstrap -->
        <link href="includes/bootstrap/css/bootstrap.css" id="bootstrap-css" rel="stylesheet" type="text/css" />
        <link href="includes/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
        
        <!-- Font Awesome -->
	    <link href="includes/fontawesome/css/font-awesome.css" rel="stylesheet" type="text/css" />

        <!-- Pines Notify -->
        <link href="includes/pnotify/jquery.pnotify.default.icons.css" rel="stylesheet" type="text/css" />
        <link href="includes/pnotify/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
        
        <!-- Google Closure -->
        <link rel="stylesheet" href="css/goog.css">

        <!-- MP -->
        <!--link rel="stylesheet" href="css/mp_layout.jquery.css"-->
        
        <!-- Boilerplate -->
        <link rel="stylesheet" href="css/main.css">
        
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div id="jQuests" style="display: none;">
            <div class="jquests-quest">1</div>
            <div class="jquests-quest">2</div>
            <div class="jquests-quest">3</div>
            <div class="jquests-quest">4</div>
            <div class="jquests-quest">5</div>
            <div class="jquests-quest">6</div>
            <div class="jquests-complete">Complete!</div>
        </div>

        <div id="mp-layout" class="ui-helper-hidden1">
	        
            <div id="mp-toptoolbar" class="ui-widget-content ui-corner-top">
                <p>
		          <button class="btn btn-primary" type="button" onclick="saveStage();">Сохранить</button>
                </p>
                <p>
		          <button class="btn btn-primary" type="button" onclick="clearStage();">Очистить</button>
                </p>
		        <div id="zoom-slider" style="display: inline-block; width: 200px;"></div>
	        </div>
	        
            <div id="mp-toolbar" class="ui-widget-content">
	        </div>

	        
            <div id="svgcanvas" style="border: 1px solid; position: relative; display: inline-block; background-color: #F6F5F4;border: 1px solid #D9D9D9;border-color: rgba(102, 102, 102, 0.25); box-shadow: inset 0 0 5px rgba(0,0,0,0.2);"></div>
            

            <div id="log" style="height:100px; overflow:auto;"></div>
        </div>
                <p>
                  <button class="btn btn-primary" type="button" onclick="saveStage();">Сохранить</button>
                </p>
        <script>window.goog || document.write('<script src="js/vendor/closure-library/closure/goog/base.js"><\/script>')</script>
        <script src="/js/mp/mp-deps.js"></script>
        <script>
            goog.require('goog.dom');
            goog.require('goog.events');
            goog.require('goog.events.EventType');         
            goog.require('goog.ui.Container');          
            goog.require('goog.ui.ContainerScroller');
            goog.require('goog.ui.Dialog');
            goog.require('goog.ui.TabPane');

            goog.require('goog.debug.DivConsole');
            
            //goog.require('mp');
            //goog.require('mp.graphics');
            goog.require('mp.graphics.Graphics');
            goog.require('mp.graphics.Element');
            goog.require('mp.ui.GLayout');
            goog.require('mp.ui.GLayoutElm');
        </script>
        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <!--script>!!window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script-->
        
        <script type="text/javascript" src="js/vendor/svgcanvas.js"></script>
        
        <script type="text/javascript" src="js/vendor/rgbcolor.js"></script>
        <script type="text/javascript" src="js/vendor/canvg.js"></script>

        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        <!--script>document.write('<script src="js/vendor/jquery-ui.min.js"><\/script>')</script-->

        <!--script type="text/javascript" src="includes/bootstrap/js/bootstrap.min.js"></script-->
        <script type="text/javascript" src="includes/pnotify/jquery.pnotify.js"></script>

        <!--script>window.Kinetic || document.write('<script src="js/vendor/kinetic-v4.0.5.min.js"><\/script>')</script>
        <script>window.Raphael || document.write('<script src="js/vendor/raphael-min.js"><\/script>')</script-->
        
        <script type="text/javascript" src="/js/compiled1.js"></script>

        <script src="js/plugins.js"></script>
        <!--script src="js/jquests.js"></script-->
        <script src="js/main.js"></script>
        <!--script src="js/mp_layout.jquery.js"></script-->       

        <script>
            window.onload = function () {
                (function() { 
                    /*
// Set up a logger to track responses
    var log = goog.debug.Logger.getLogger('Events');
    goog.debug.LogManager.getRoot().setLevel(goog.debug.Logger.Level.ALL);
    var logconsole = new goog.debug.DivConsole(document.getElementById('log'));
    logconsole.setCapturing(true);

    // A helper function to handle events.
    function handleEvent(elementType) {
      return function(e) {
        log.info(elementType + ' ' + e.type + '.');
      }
    }
    */
        var layout_elm_schemes = [
                        { type: 1, isRound: false, isTable: true, scheme: [
                            [0, 0, 2, 8, 8, 2, 0, 0],
                            [0, 1, 1, 1, 1, 1, 1, 0],
                            [2, 1, 0, 3, 3, 0, 1, 0],
                            [0, 1, 0, 0, 0, 0, 1, 0],
                            [0, 0, 0, 0, 0, 0, 0, 0]], title: "asdsad adad ad ad das asd adП-стол"
                        },
                        { type: 2, isRound: false, isTable: true, scheme: [
                            [0, 0, 2, 8, 8, 2, 0, 0],
                            [0, 1, 1, 1, 1, 1, 1, 0],
                            [2, 0, 0, 1, 1, 0, 0, 0],
                            [0, 0, 0, 1, 1, 0, 0, 0],
                            [0, 0, 0, 0, 0, 0, 0, 0]], title: "Т-стол",
                            sits: [
                                {name:'1asad adas ad sdfsdfsd sdfs f', position:{x:0, y:1}},
                                {name:'asdsdadsdadsd a123 sfs fsdf s', position:{x:2, y:2}},
                                {name:'1as da dad da dsdf sfs fsdf ', position:{x:2, y:0}},
                                {name:'11sda dasd ad ad ad asdfsdf', position:{x:6, y:0}},
                                {name:'111asd ad a asd d as11', position:{x:7, y:1}},
                                {name:'12asd a ad ad3sdfsd fsdfsdfsdf sdfsd sdfdssdf sd fs', position:{x:6, y:2}},
                                {name:'as ad ad a dadasdasd a1', position:{x:2, y:3}},
                                ],
                        },
                        { type: 3, isRound: true, isTable: true, scheme: 6, title: "Круглый стол" },
                        { type: 3, isRound: true, isTable: true, scheme: 16, title: "Круглый стол 2" },
                        { type: 3, isRound: true, isTable: true, scheme: 6, title: "Круглый стол 3", 
                            sits: [
                                {name:'1 ad asdasdad ', position:0},
                                {name:'123', position:1},
                                {name:'1adad asd ada ', position:2},
                                {name:'123sad asd aasd asdsd', position:3},
                                {name:'1asd ad sad asd sad', position:4},
                                {name:'as a dsad123asd asd', position:5},
                                {name:'asda  asdadsaa1', position:6},
                                ] },
                        { type: 4, isRound: false, isTable: true, scheme: [
                            [0, 0, 2, 0],
                            [0, 1, 1, 0],
                            [2, 1, 1, 0],
                            [0, 0, 0, 0]], title: "Прямоугольный стол"
                        },
                        { type: 5, isRound: false, isTable: true, scheme: [
                            [8, 8],
                            [1, 1]], title: "Cтол молодоженов"
                        },
                        { type: 6, isRound: false, isTable: false, scheme: [[1, 1], [1, 1]], title: "Танцпол" },
                        { type: 7, isRound: true, isTable: false, scheme: [[1, 1], [1, 1]], title: "Круглый Танцпол" },
                        { type: 8, isRound: false, isTable: false, scheme: [[1], [1]], title: "Стена" },
                        { type: 9, isRound: true, isTable: false, scheme: [[1]], title: "Колонна" },
                        { type: 10, isRound: false, isTable: false, scheme: [[1], [1], [1]], title: "Лестница" }
                    ];

    //graphics = mp.process(document.getElementById('svgcanvas'), layout_elm_schemes, 800, 500);
    
    // Create an elipse.
    graphics = new mp.graphics.Graphics(800, 500, 800, 500);
    glayout = new mp.ui.GLayout(graphics);
    
    //var ggroup = new goog.graphics.ext.Group(graphics);
    for(var i=0; i<1; i++)
    for(var idx in layout_elm_schemes) {
       var grp = new mp.graphics.Element(layout_elm_schemes[idx], graphics);

       if(grp.getElement()) {
            var glayoutelm = new mp.ui.GLayoutElm(grp);
            glayout.addChild(glayoutelm);
        }
    }

    glayout.render(document.getElementById('svgcanvas'));

                })();

                // Fill layout elms schemes
/*
                var layout_elm_schemes = [
                        new MPLayoutObject({ type: 1, isRound: false, isTable: true, scheme: [
                            [0, 0, 2, 8, 8, 2, 0, 0],
                            [0, 1, 1, 1, 1, 1, 1, 0],
                            [2, 1, 0, 3, 3, 0, 1, 0],
                            [0, 1, 0, 0, 0, 0, 1, 0],
                            [0, 0, 0, 0, 0, 0, 0, 0]], title: "П-стол"
                        }),
                        new MPLayoutObject({ type: 2, isRound: false, isTable: true, scheme: [
                            [0, 0, 2, 8, 8, 2, 0, 0],
                            [0, 1, 1, 1, 1, 1, 1, 0],
                            [2, 0, 0, 1, 1, 0, 0, 0],
                            [0, 0, 0, 1, 1, 0, 0, 0],
                            [0, 0, 0, 0, 0, 0, 0, 0]], title: "Т-стол"
                        }),
                        new MPLayoutObject({ type: 3, isRound: true, isTable: true, scheme: 6, title: "Круглый стол" }),
                        new MPLayoutObject({ type: 3, isRound: true, isTable: true, scheme: 16, title: "Круглый стол 2" }),
                        new MPLayoutObject({ type: 3, isRound: true, isTable: true, scheme: 3, title: "Круглый стол 3" }),
                        new MPLayoutObject({ type: 4, isRound: false, isTable: true, scheme: [
                            [0, 0, 2, 0],
                            [0, 1, 1, 0],
                            [2, 1, 1, 0],
                            [0, 0, 0, 0]], title: "Прямоугольный стол"
                        }),
                        new MPLayoutObject({ type: 5, isRound: false, isTable: true, scheme: [
                            [8, 8],
                            [1, 1]], title: "Cтол молодоженов"
                        }),
                        new MPLayoutObject({ type: 6, isRound: false, isTable: false, scheme: [[1, 1], [1, 1]], title: "Танцпол" }),
                        new MPLayoutObject({ type: 7, isRound: true, isTable: false, scheme: [[1, 1], [1, 1]], title: "Круглый Танцпол" }),
                        new MPLayoutObject({ type: 8, isRound: false, isTable: false, scheme: [[1], [1]], title: "Стена" }),
                        new MPLayoutObject({ type: 9, isRound: true, isTable: false, scheme: [[1]], title: "Колонна" }),
                        new MPLayoutObject({ type: 10, isRound: false, isTable: false, scheme: [[1], [1], [1]], title: "Лестница" }),
                    ];

                _MPLayout = new MPLayout({
                    stage: jQuery("#mp-canvas"),
                    toolbar: jQuery("#mp-toolbar"),
                    layoutMembers: layout_elm_schemes,
                    pair: [{ id: -1, name: "Жених" }, { id: -2, name: "Невеста"}],
                    guests: [{ id: 0, name: "Папа" }, { id: 1, name: "Мама"}]
                });
*/
                clearStage = function () {
                    graphics.expandCanvas(5);
                    //canvg();
                };

                saveStage = function () {                    
                    graphics.fitToCanvas(3);
                };

                ///////////////////////////////////
                /*
                //sayHi();

                //var wraper = goog.dom.$$(null, 'mp-wrapper');
                //console.log(wraper);
                //goog.ui.Container(wraper);

                var pane = new goog.ui.Container();
                pane.render(goog.dom.getElement('mp-wrapper'));
                //goog.ui.ContainerScroller(pane);         
                // Scrolling container.

                //console.log(goog.dom.$$('div', 'mp-wrapper'));

                var tb4 = new goog.ui.Container();
                tb4.decorate(goog.dom.$$('div', 'mp-wrapper')[0]);
                //tb4.setKeyEventTarget(goog.dom.getElement('mp-wrapper'));
                tb4.setFocusable(true);
                new goog.ui.ContainerScroller(tb4);


                var m = new mp.Matrix([
                [0, 0, 2, 0],
                [0, 1, 1, 0],
                [2, 1, 1, 0],
                [0, 0, 0, 0]]);

                console.log(m.toString());*/

/*
            _q = $('#jQuests').jquests({ rules: [
                function () { _q.questDone(0); },
                function () { _q.questReject('!!!'); },
                function () { _q.questDone(2); },
                function () { _q.questDone(3); },
                function () { _q.questDone(4); },
                function () { _q.questDone(5); },
            ]});

                _MPLayout.stage.bind('appendObject', _q.rules[0]);
                _MPLayout.stage.bind('appendObject', _q.rules[1]);
                _MPLayout.stage.bind('appendObject', _q.rules[2]);
                _MPLayout.stage.bind('appendObject', _q.rules[3]);
                _MPLayout.stage.bind('appendObject', _q.rules[4]);
                _MPLayout.stage.bind('appendObject', _q.rules[5]);
*/

            };

        </script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
           /* var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script')); */
        </script>
    </body>
</html>
